<template>
  <el-card class="box-card" style="height: 100%;">
    <div slot="header">
      <span>分类选择</span>
    </div>
    <el-scrollbar class="project-list-scroll">
      <el-menu class="side-project-list" :default-active="activeIndex">
        <el-menu-item v-for="(item,index) in list" :key="item.id" :index="(index + 1).toString()"
          @click="selectList(item.id)">
          <span slot="title">
            <i :class="item.icon"></i>
            <span style="margin-left: 10px;">{{item.name}}</span>
          </span>
        </el-menu-item>
      </el-menu>
    </el-scrollbar>
  </el-card>
</template>

<script>
  export default {
    data() {
      return {
        activeIndex: "1",
        list: [{
          id: 99,
          icon: "el-icon-menu",
          name: "全部订单"
        }, {
          id: 0,
          icon: "el-icon-wallet",
          name: "待付款"
        }, {
          id: 1,
          icon: "el-icon-document-checked",
          name: "已付款"
        },{
          id: 2,
          icon: "el-icon-truck",
          name: "已发货"
        }, {
          id: -1,
          icon: "el-icon-warning-outline",
          name: "售后"
        }]
      }
    },
    methods: {
      selectList(data) {
        this.$bus.$emit('selectProject', data)
        this.$bus.$emit("onSelectProject", data);
      },
    }
  }
</script>

<style scoped="scoped" lang="scss">
  .el-menu {
    border-right: none;
  }

  .project-list-scroll {
    height: 100%;
    padding-bottom: 50px;
  }

  ::v-deep .el-card__body {
    height: 100%;
    padding-right: 0;
  }

  .el-menu-item.is-active {
    background-color: rgba(198, 226, 255, .5);
  }

  .el-menu-item.is-disabled {
    opacity: .5;
  }
</style>

<style lang="scss">
  .el-scrollbar__wrap {
    overflow-x: hidden;
    margin-bottom: 0 !important;
  }
</style>
